<template>
  <div class="map-container">
    <div id="cesiumContainer" ref="mapContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium'

const viewer = ref<Cesium.Viewer | null>(null)
const mapContainer = ref<HTMLElement | null>(null)

// 地图配置
const MAP_CONFIG = {
  INITIAL_POSITION: {
    longitude: 112.4,
    latitude: 34.9,
    height: 5000
  },
  LOCATIONS: [
    { name: '小浪底', lat: 34.9, lon: 112.4 },
    { name: '孔洞信息', lat: 34.89, lon: 112.39 },
    { name: '机组信息', lat: 34.88, lon: 112.41 }
  ]
}

// 初始化地图
const initMap = async () => {
  // 配置地图
  viewer.value = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: await Cesium.createWorldTerrainAsync(),
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    scene3DOnly: true,
    creditContainer: document.createElement('div') // Hide credits/watermark
  })

  // 设置底图
  const imageryLayer = new Cesium.ImageryLayer(
    new Cesium.UrlTemplateImageryProvider({
      url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      minimumLevel: 1,
      maximumLevel: 18
    })
  )
  viewer.value.scene.imageryLayers.add(imageryLayer)

  // 优化性能
  const scene = viewer.value.scene
  scene.globe.enableLighting = false
  scene.fog.enabled = false
  scene.skyAtmosphere.show = false
  
  // 设置相机位置
  viewer.value.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      MAP_CONFIG.INITIAL_POSITION.longitude,
      MAP_CONFIG.INITIAL_POSITION.latitude,
      MAP_CONFIG.INITIAL_POSITION.height
    ),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-45.0),
      roll: 0.0
    }
  })

  // 禁用默认的双击事件
  viewer.value.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  )

  // 添加标记点
  addMapMarkers()
}

// 添加地图标记
const addMapMarkers = () => {
  if (!viewer.value) return

  MAP_CONFIG.LOCATIONS.forEach(loc => {
    viewer.value?.entities.add({
      position: Cesium.Cartesian3.fromDegrees(loc.lon, loc.lat),
      billboard: {
        image: '',
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        scale: 1,
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      },
      label: {
        text: loc.name,
        font: '14px sans-serif',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -32),
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      }
    })
  })
}

// 清理资源
const cleanupMap = () => {
  if (viewer.value) {
    viewer.value.destroy()
    viewer.value = null
  }
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  cleanupMap()
})
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  
  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  :deep(.cesium-viewer-bottom) {
    display: none;
  }
}

// :deep(.cesium-viewer-toolbar) {
//   top: 20px;
//   right: 120px;
//   background: rgba(13, 19, 35, 0.8);
//   padding: 4px;
//   border-radius: 4px;
//   border: 1px solid rgba(63, 158, 255, 0.1);
//   backdrop-filter: blur(10px);
// }

:deep(.cesium-button) {
  background-color: rgba(63, 158, 255, 0.1);
  border: 1px solid rgba(63, 158, 255, 0.2);
  color: #fff;
  fill: #fff;
  
  &:hover {
    background-color: rgba(63, 158, 255, 0.2);
    border-color: rgba(63, 158, 255, 0.3);
  }
}
</style> 